import React from 'react'
import { Carousel, WingBlank } from 'antd-mobile';

export default class App extends React.Component {
    state = {
        imgHeight: 176,
    }
    render() {
        return (
            <WingBlank>
                <Carousel
                    autoplay={true}
                    infinite
                    dots={this.props.dots}
                    afterChange={index => {
                        console.log(this.props)
                        this.props.after(index)
                    }
                    }
                >
                    {this.props.data ? this.props.data.map((val, index) => (
                        <a
                            key={index}
                            href={val.jumpUrl}
                            style={{ display: 'inline-block', width: '100%', height: this.props.imgHeight }}
                        >
                            <img
                                src={`${val.picUrl}`}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top', height: this.props.imgHeight }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: this.props.imgHeight });
                                }}
                            />
                        </a>
                    )) : ''}
                </Carousel>
            </WingBlank>
        );
    }
}
